<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>产品信息列表</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="/js/jquery-3.3.1.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="/js/bootstrap.min.js"></script>


    <!-- 3. vue的js文件 -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios-0.18.0.js"></script>

    <style type="text/css">
        td, th {
            text-align: center;
        }
        .kkk:hover{
            opacity: 0.3;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <a href="/admin/gotoAdminMain"><span style="position: absolute;margin-top: 20px;margin-left: 20px;font-size: 18px;">返回首页</span></a>
    <h3 style="text-align: center">产品信息列表</h3>

    <table  border="1" class="table table-bordered table-hover" width="1200">
        <form action="#">
            <tr>
                <td style="vertical-align: middle">
                    <input style="width: 60px;" type="number" v-model="pid"  size="10"  placeholder="编号">
                </td>
                <td width="40" style="vertical-align: middle">
                    <a @click="search()" href="#" id="find" class="btn btn-primary">查询</a>
                </td>
            </tr>
        </form>
        <tr class="success">
            <th style="width: 60px;">编号</th>
            <th>目录编号</th>
            <th>类型</th>
            <th style="width: 200px;">标题</th>
            <th>销售语</th>
            <th>价格</th>
            <th>数量</th>
            <th>照片</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>

        <tr v-for="item in info.list">
            <td style="width: 60px;">{{item.id}}</td>
            <td>{{item.categoryId}}</td>
            <td>{{item.itemType}}</td>
            <td>{{item.title}}</td>
            <td>{{item.sellPoint}}</td>
            <td>{{item.price}}</td>
            <td>{{item.num}}</td>
            <td><img :src="item.image + '1_big.png'" style="width: 30px;height: 30px;"></td>
            <td>{{item.modifyTime}}</td>
            <td>
                <a @click="toUpdate(item.id)" class="btn btn-default btn-sm" href="#">修改</a>&nbsp;
                <a @click="toDelete(item.id)" class="btn btn-default btn-sm" href="#">删除</a>
            </td>
        </tr>

        <tr>
            <td colspan="10" align="center">
                <a @click="toFirst()" href="#" class="btn btn-primary"  id="first">首页</a>
                <span >
                    <a @click="toPre()" href="#"  class="btn btn-primary">上一页</a>
                </span>

                &nbsp;&nbsp;&nbsp;&nbsp;
                <span v-for="index in pageList">
						<a @click="toPage(index)" v-if="index == info.pageNum" class="kkk" href="#"  style="border-radius: 20px;padding: 10px;padding-left: 15px;
                   padding-right: 15px; background-color:black;color: white">{{index}}</a>
						<a @click="toPage(index)" v-if="index != info.pageNum" class="kkk" href="#"  style="border-radius: 20px;padding: 10px;padding-left: 15px;
                   padding-right: 15px; background-color:rgb(30,159,255);color: white">{{index}}</a>
					</span>
                &nbsp;&nbsp;&nbsp;&nbsp;

                <span >
                    <a @click="toNext()" href="#" id="next" class="btn btn-primary">下一页</a>
                </span>
                <a @click="toLast()" href="#" class="btn btn-primary" id="last">尾页</a>
            </td>
        </tr>
        <tr>
            <td colspan="10" align="center"><a class="btn btn-primary" href="/admin/gotoAdd2">添加产品信息</a></td>
        </tr>
        <tr>
            <td colspan="10">
                <span style="margin-top: 10px;margin-left: 20px;font-size: 20px;color: black;font-weight: bold;">合计：{{info.pages}}页，当前：{{info.pageNum}}/{{info.pages}}</span>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            info:{},
            pid:"",
            pageList:[]
        },
        created(){
            this.load();
        },
        methods:{
            load(){
                axios.get("/admin/productList").then(resp=>{
                    this.info = resp.data.info;
                    this.pageList = resp.data.pageList;
                })
            },
            search(){
                axios.get("/admin/productFindByCase?pid=" + this.pid).then(resp=>{
                    this.info = resp.data.info;
                    this.pid = resp.data.pid;
                    this.pageList = resp.data.pageList;
                })
            },
            toFirst(){
                axios.get("/admin/productFindByCase?pid=" + this.pid).then(resp=>{
                    this.info = resp.data.info;
                    this.pid = resp.data.pid;
                    this.pageList = resp.data.pageList;
                })
            },
            toLast(){
                axios.get("/admin/productFindByCase?pid=" + this.pid + "&page=" + this.info.pages).then(resp=>{
                    this.info = resp.data.info;
                    this.pid = resp.data.pid;
                    this.pageList = resp.data.pageList;
                })
            },
            toPre(){
                var page = 1;
                if (this.info.pageNum > 1){
                    page = this.info.pageNum - 1;
                }
                axios.get("/admin/productFindByCase?pid=" + this.pid + "&page=" + page).then(resp=>{
                    this.info = resp.data.info;
                    this.pid = resp.data.pid;
                    this.pageList = resp.data.pageList;
                })
            },
            toNext(){
                var page = this.info.pageNum;
                if (page < this.info.pages){
                    page = page + 1;
                }
                axios.get("/admin/productFindByCase?pid=" + this.pid + "&page=" + page).then(resp=>{
                    this.info = resp.data.info;
                    this.pid = resp.data.pid;
                    this.pageList = resp.data.pageList;
                })
            },
            toPage(param){
                axios.get("/admin/productFindByCase?pid=" + this.pid + "&page=" + param ).then(resp=>{
                    this.info = resp.data.info;
                    this.pid = resp.data.pid;
                    this.pageList = resp.data.pageList;
                })
            },
            toDelete(param){
                axios.get("/admin/productDelete?pid=" + param).then(resp=>{
                    alert("删除成功！");
                    location.reload(true);
                })
            },
            toUpdate(param){
                location.href = "/admin/gotoUpdate2?pid=" + param;
            }
        }
    })
</script>